import 'package:flutter/material.dart';
import 'package:lyf_shop/modules/login/views/hi_login_navbar.dart';
import 'package:lyf_shop/utils/hi_string_util.dart';

import '../views/login_effect.dart';
import '../views/login_input.dart';

class RegisterationPage extends StatefulWidget {
  const RegisterationPage({super.key});

  @override
  State<RegisterationPage> createState() => _RegisterationPageState();
}

class _RegisterationPageState extends State<RegisterationPage> {
  bool protect = false;
  bool loginEnable = false;
  String? userName;
  String? password;
  String? rePassword;
  String? imoocId;
  String? orderId;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: HiAppBar('注册', '登录', () => {_loginBtnClick()}),
      body: Container(
        child: ListView(
          children: [
            LoginEffect(
              protect: protect,
            ),
            LoginInput(
              title: '姓名',
              hint: '请输入姓名',
              onChanged: (value) {
                userName = value;
                checkInput();
              },
            ),
            LoginInput(
              title: '密码',
              hint: '请输入密码',
              obscureText: true,
              onChanged: (value) {
                password = value;
                checkInput();
              },
              focusChanged: (focus) => {
                this.setState(() {
                  protect = focus;
                })
              },
            ),
            LoginInput(
              title: '确认密码',
              hint: '请再次输入密码',
              obscureText: true,
              onChanged: (value) {
                rePassword = value;
                checkInput();
              },
              focusChanged: (focus) => {
                this.setState(() {
                  protect = focus;
                })
              },
            ),
            LoginInput(
              title: '慕课网ID',
              hint: '请输入你的慕课网用户ID',
              obscureText: true,
              onChanged: (value) {
                imoocId = value;
                checkInput();
              },
            ),
            LoginInput(
              title: '课程订单号',
              hint: '请输入课程订单号后四位',
              obscureText: true,
              lineStretch: true,
              onChanged: (value) {
                orderId = value;
                checkInput();
              },
            ),
            Padding(
              padding: EdgeInsets.only(top: 40, left: 20, right: 20),
              child: FractionallySizedBox(
                widthFactor: 1,
                child: MaterialButton(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(6)),
                  height: 45,
                  onPressed: loginEnable ? _registerBtnClicked : null,
                  disabledColor: Colors.grey,
                  color: Colors.pink,
                  child: Text(
                    '注册',
                    style: TextStyle(fontSize: 16, color: Colors.white),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  void checkInput() {
    bool enable;
    if (isNotEmpty(userName) &&
        isNotEmpty(password) &&
        isNotEmpty(rePassword) &&
        isNotEmpty(imoocId) &&
        isNotEmpty(orderId)) {
      enable = true;
    } else {
      enable = false;
    }

    this.setState(() {
      loginEnable = enable;
    });
  }

  _registerBtnClicked() {
    print('userName=${userName}  password=${password} rePwd=${rePassword}');
  }

  _loginBtnClick() {
    print('去登录');
  }
}
